export const grid = {
  left: 32,
  top: 20,
  right: 20,
  bottom: 20
};

export const clusterTooltip = {
  backgroundColor: null,
  padding:0,
  borderColor: null,
  borderWidth: 0,
  trigger: 'axis',
  axisPointer: {
    // 坐标轴指示器，坐标轴触发有效
    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
  },
  appendToBody: false,
  confine: true,
  textStyle: {
    align: 'left'
  },
  // position: ['10%', '50%'],
  textStyle:{
    color:'#fff',
  },
  trigger: 'axis',
  formatter: (params) => {
    var str = '<div class="blur-data cus-tooltip">'
      str += `
      <div style="width: 100%;display:flex;align-items:center;justify-content: space-between;">
        <div class="cus-tooltip-label">
          <div class="cus-tooltip-circle"></div>
          <div>${params[0].seriesName}</div>
        </div>
        <div style="font-weight:600;">${params[0].value} 次</div>
      </div>
      `
    str += '</div>'
    return str
  }
};

export const tooltip = {
  position: 'top',
  formatter: '{c}',
  backgroundColor: '#3167FE',
  borderRadius: 30,
  padding: [5, 12],
  confine: true,
  textStyle: {
    color: 'white',
    fontSize: 16
  }
};


export const barOptions = {
  chart: {	
    type: 'bar',	
    height: '100%',	
    // offsetY: -10	
  },
  colors: ['#22B1FF'],
  xaxis: {
    tooltip: {
      enabled: false
    },
    labels: {	
      rotate: 0,
      style: {
        colors: 'rgba(255,255,255,0.6)',
        fontSize: 12,
      },
    },
    axisTicks: {
      show: false,
    },
    formatter: function (val, index, v) {
      // console.log(val, index);
      if (v) {
        return v.i % 2 !== 0 ? '' : val;
      }
      return val;
    }
  },
  tooltip: {	
    shared: true,	
    intersect: false,	
    custom: function ({ series, seriesIndex, dataPointIndex, w }) {	
      return `<div ><span class="dcharts-tooltip-name">${w.config.series[0].name}</span>${series[0][dataPointIndex]} 次</div>	
      `	
    }	
  },
  
  plotOptions: {	
    bar: {	
      columnWidth: 40,	
      borderRadius: 2,	
    }	
  },
}

export const lineOptions = {
  chart: {
    height: '100%',
    width: '100%',
    type: 'area',
  },
  colors: ['#F12F83'],
  fill: {
    type: "gradient",
    gradient: {
      shadeIntensity: 0,
      opacityFrom: 1,
      opacityTo: .6,
      stops: [0, 100],
      type: 'vertical'
    }
  },
  tooltip: {
    custom: function ({ series, seriesIndex, dataPointIndex, w }) {
      return `<div><span><span class="dcharts-tooltip-circle" style="background:#F12F83;"></span><span class="dcharts-tooltip-name">${w.config.series[0].name}</span></span>${series[0][dataPointIndex]} 次</div>
      `
    }
  },
  xaxis: {
    tooltip: {
      enabled: false
    },
    axisTicks: {
      show: false
    },
    labels: {
      rotate: 0,
      style: {
        colors: 'rgba(255,255,255,0.6)',
        fontSize: 12,
      },
      formatter: function (val, index, v) {
        if (v) {
          return v.i % 2 !== 0 ? '' : val;
        }
        return val;
      }
    },
  },
  markers: {
    size: 3,
  },
  stroke: {
    curve: 'smooth',
    width: 2
  },
}

export function deepMerge(obj1, obj2) {
  const result = { ...obj2 }
  for (const key in obj1) {
    var value1 = obj1[key]
    var value2 = result[key]
    if (Object.prototype.hasOwnProperty.call(result, key)) {
      if (Object.prototype.toString.call(value1) === '[object Object]' && Object.prototype.toString.call(
        value2) === '[object Object]') {
        result[key] = this.deepMerge(value1, value2)
      }
    } else {
      result[key] = value1
    }
  }
  return result
}
